<template>
  <div class="mod-home">
    <div v-if="roles==2">
      <div class="mod-home-text">用户名:{{ name }}</div>
      <div class="mod-home-text">
        角色:
        <span v-for="role in roles" :key="role">{{ role }}</span>
      </div>
      <div class="mod-home-text">学号:{{ number }}</div>
    </div>
    <div v-else>
      <el-row :gutter="20">
        <el-col
          v-for="(infor, i) in inforCardData"
          :xs="12"
          :md="8"
          :lg="8"
          :key="`infor-${i}`"
          style="height: 120px;padding-bottom: 10px;"
        >
          <infor-card :color="infor.color" :icon="infor.icon" :icon-size="36">
            <count-to :end="infor.count" count-class="count-style"/>
            <p class="count-title">{{ infor.title }}</p>
          </infor-card>
        </el-col>
      </el-row>
      <div class="mod-demo-echarts">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-card>
              <div id="J_chartBarBox" class="chart-box"/>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import InforCard from "_c/number/info-card";
import CountTo from "_c/number/count-to";
import { mapGetters } from "vuex";
import { getHomeData } from "@/api/chart";
export default {
  components: {
    InforCard,
    CountTo
  },
  data() {
    return {
      chartBar: null,
      inforCardData: [
        {
          title: "课程数",
          icon: "organization",
          count: 0,
          color: "#2d8cf0"
        },
        {
          title: "老师数",
          icon: "xiangmu",
          count: 0,
          color: "#19be6b"
        },
        {
          title: "学生数",
          icon: "chakancishu",
          count: 0,
          color: "#ff9900"
        }
        // {
        //   title: '合格率',
        //   icon: 'menzhenshoufei',
        //   count: 657,
        //   color: '#ed3f14'
        // }
      ],
      barOption: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        toolbox: {
          show: true,
          right: "16%",
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            // restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ["人数"]
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "人数",
            min: 0,
            max: 100,
            interval: 10,
            axisLabel: {
              formatter: "{value}"
            }
          }
        ],
        series: [
          {
            name: "人数",
            type: "bar",
            data: []
          }
        ]
      }
    };
  },
  computed: {
    ...mapGetters(["name", "roles", "number"])
  },
  mounted() {
    if (this.roles != 2) {
      this.getHomeData();
    }
  },
  activated() {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chartBar) {
      this.chartBar.resize();
    }
  },
  methods: {
    // 柱状图
    initChartBar() {
      this.chartBar = echarts.init(document.getElementById("J_chartBarBox"));
      this.chartBar.setOption(this.barOption);
      window.addEventListener("resize", () => {
        this.chartBar.resize();
      });
    },
    getHomeData() {
      getHomeData().then(res => {
        if (res.code === 1) {
          this.inforCardData[0].count = res.data.number.courseNum;
          this.inforCardData[1].count = res.data.number.teacherNum;
          this.inforCardData[2].count = res.data.number.studentNum;
          let data1 = [];
          let data2 = [];
          res.data.course.forEach(element => {
            data1.push(element.courseName);
            data2.push(element.students.length);
          });
          this.barOption.yAxis[0].max = Math.ceil(Math.max(...data2) / 10) * 10;
          this.barOption.xAxis[0].data = data1;
          this.barOption.series[0].data = data2;
          this.initChartBar();
        }
      });
    }
  }
};
</script>

<style lang="scss">
.mod-home {
  /* line-height: 1.5; */
  padding: 20px;
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
  .el-card__body {
    padding: 0;
    height: 100%;
  }
  .count-style {
    font-size: 50px;
  }
  .count-title {
    margin: 0;
  }
  .mod-demo-echarts {
    > .el-alert {
      margin-bottom: 10px;
    }
    > .el-row {
      margin-top: -10px;
      margin-bottom: -10px;
      .el-col {
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }
    .chart-box {
      // min-height: 400px;
      height: calc(100vh - 260px);
    }
  }
}
</style>

